<!--  -->
<template>
	<div class="weather-wrapper">
		<div class="weather"><img :src="weather.wea_img" /> <div>{{ weather.wea }}</div></div>
		<div class="temp">{{weather.temp}}℃ 室外温度</div>
		<div class="wind">{{weather.winddirection}}风 {{weather.windpower}}级</div>
	</div>
</template>

<script>
import weatherList from "./weatherData"
import timer from './mixins/timer'
export default {
	mixins: [timer],
	//import引入的组件需要注入到对象中才能使用
	components: {},
	data() {
		//这里存放数据
		return {
			now: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
			hours: new Date().getHours(),
			weather: {
				temp: "",
				wea: "",
				wea_img: "",
				windpower: "",
				winddirection: ""
			}
		};
	},
	//监听属性 类似于data概念
	computed: {
		
	},
	//监控data中的数据变化
	watch: {},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		this.getWeather()
	},
	//方法集合
	methods: {
		getWeather(){
			// console.log("读取天气信息====>",this.now,this.hours)
			var promise = fetch("https://restapi.amap.com/v3/weather/weatherInfo?key=6cfb5f293996901e0b04c8e134fc6d74&city=510600&extensions=all")
			.then((resp)=>{
				if(resp.status === 200){
					return resp.json();
				}else{
					return {}
				}
			});
			promise.then((data)=>{
				// console.log(data)
				if (data.status === "1") {
					let cur_weather = data.forecasts[0].casts[0]
					let name;
					if(this.hours >= 6 && this.hours <= 18){
						this.weather.wea = name = cur_weather.dayweather;
						this.weather.temp = cur_weather.daytemp;
						this.weather.windpower = cur_weather.daypower;
						this.weather.winddirection = cur_weather.daywind;
					}else{
						this.weather.wea = name = cur_weather.nightweather;
						this.weather.temp = cur_weather.nightweather;
						this.weather.windpower = cur_weather.nightpower;
						this.weather.winddirection = cur_weather.nightwind;
					}
					let img = weatherList.filter((item) => item.name == name)[0].url
					this.weather.wea_img = img

					this.$emit('onLoad',this.weather)
				}
			}).catch(function(err){
				console.log(err);
			})
		}
	},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.weather-wrapper {
	flex: 1;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: left;
	padding-right: 20px;
	display: flex;
	.temp, .wind{
		margin-left:20px;
	}
	.weather {
		display: flex;
		align-items: center;
		img { width: 20px; margin-right:5px;}
	}
}
</style>